<template>
    <div class="overview-box">
      <div style="width: 100%; height: 50%;">
        <el-card style="width: 49%; height: 100%; float: left">
			<div style="width: 25%; height: 23px;
				margin-bottom: 3%; margin-left: 70%; border-style: solid;
				border-width: thin; border-radius: 10px; border-color: #d5d5d5;"
			>
				<input
					class="search-input"
                    style="width: 80%; height: 20px; float: left; border-style: none; border-radius: 10px"
                    v-model="searchStu"
                    placeholder="输入考生号搜索"
                    @change="getUserByUN()"
                />
                <img @click="getUserByUN()" style="height: 100%; width: 16%; float: left" src="../../assets/info/search.svg" alt="">
			</div>
			<el-descriptions :column="3" border>
                <el-descriptions-item label="姓名" label-align="center" align="center">{{this.userInfo.name}}</el-descriptions-item>
                <el-descriptions-item label="性别" label-align="center" align="center">{{this.userInfo.sex}}</el-descriptions-item>
                <el-descriptions-item label="电话号码" label-align="center" align="center">{{this.userInfo.phone}}</el-descriptions-item>
				<el-descriptions-item label="身份证号" label-align="center" align="center">{{this.userInfo.identity}}</el-descriptions-item>
				<el-descriptions-item label="学号" label-align="center" align="center">{{this.userInfo.userName}}</el-descriptions-item>
                <el-descriptions-item label="学院" label-align="center" align="center">{{this.userInfo.college}}</el-descriptions-item>
                <el-descriptions-item label="专业" label-align="center" align="center">{{this.userInfo.major}}</el-descriptions-item>
                <el-descriptions-item label="班级" label-align="center" align="center">{{this.userInfo.classes}}</el-descriptions-item>
                <el-descriptions-item label="邮箱" label-align="center" align="center">{{this.userInfo.email}}</el-descriptions-item>
                <el-descriptions-item label="家庭地址" label-align="center" align="center">{{this.userInfo.address}}</el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-card style="width: 50%; height: 100%; float: left; margin-left: 5px">
          <div id="score-line" style="width: 100%; height: 250px"></div>
        </el-card>
      </div>
      <el-card class="box-card">
        <div id="college-info"  style="width: 100%; height: 250px"></div>
      </el-card>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus';

import request from '../../utils/request';

export default {
	data() {
		return {
			colleges: [
				{ college: '' },
				{ college: '' },
				{ college: '' },
				{ college: '' },
				{ college: '' },
				{ college: '' },
				{ college: '' },
				{ college: '' },
				{ college: '' },
				{ college: '' },
				{ college: '' },
				{ college: '' },
				{ college: '' },
				{ college: '' },
			],
			cinfo: '',
			userInfo: '',
			searchStu: '',
			user: {
				userName: ''
			}
		}
	},
	mounted() {
		this.initLine();
	},
	created() {
		this.getCollege();
	},
	methods: {
		initLine() {
			var lineChart = this.$echarts.init(document.getElementById('score-line'))

			var lineOption = {
				title: {
					text: '近7年录取分数线',
					left: 'center'
				},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021']
				},
				yAxis: {
					type: 'value',
					min: 520,
					max: 600
				},
				series: [{
					data: [560, 570, 574, 568, 579, 565, 580],
					type: 'line',
					markLine: {
						silent: true,
						data: [{
							yAxis: 540
						}, {
							yAxis: 560
						}, {
							yAxis: 580
						}]
					}
				}]
			};

			lineChart.setOption(lineOption)
		},
		initCoInfoHist() {
			var histChart = this.$echarts.init(document.getElementById('college-info'));

			// 指定图表的配置项和数据
			var collInfoHistOption = {
				color: ['#3398DB'],
				title: {
					text: '各学院人数',
					// subtext: this.college,
					left: 'center'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'line' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: [ this.colleges[0]?.college, this.colleges[1]?.college,
							this.colleges[2].college, this.colleges[3].college, this.colleges[4].college,
							this.colleges[5].college, this.colleges[6].college, this.colleges[7].college,
							this.colleges[8].college, this.colleges[9].college, this.colleges[10].college,
							this.colleges[11].college, this.colleges[12].college, this.colleges[13].college],
						// this.college[1].college,
						// this.college[1].college, this.college[1].college, this.college[1].college],
						// ['计算机\n科学学\n院', '生物科\n学学院', '地理\n学院', '经济管\n理学院', '体育\n学院', '舞蹈\n学院', '音乐\n学院', '建筑\n学院', '土木水\n利学院', '环境\n学院', '航天航\n空学院', '公共管\n理学院', '法学院', '新闻与\n传播\n学院'],
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '人数',
						type: 'bar',
						barWidth: '60%',
						label: {
							show: true,
							position: 'top'
						},
						data: [ 340, 250, 130, 460, 400, 223, 344, 543, 303, 200, 400, 347, 240, 109]
					}
				]
			};


			// 使用刚指定的配置项和数据显示图表。
			histChart.setOption(collInfoHistOption);
		},
		//获取学院信息
		getCollege() {
			request({
				method: 'get',
				url: '/api/college/get-all'
			}).then(res => {
				if (res.code === 1) {
					this.cinfo = res.data;
					for (var i = 0; i < this.cinfo.length; i++) {
						if (this.cinfo[i].college.length > 6) {
							let str = this.cinfo[i].college.split('');
							str.splice(3, 0, '\n');
							str.splice(7, 0, '\n');
							this.colleges[i].college = str.join('');
						} else if (this.cinfo[i].college.length > 3) {
							let str = this.cinfo[i].college.split('');
							str.splice(3, 0, '\n');
							this.colleges[i].college = str.join('');
						} else {
							this.colleges[i].college = this.cinfo[i].college;
						}
					}
				}
				this.initCoInfoHist();
			})
		},
		// 获取学生信息
		getUserByUN() {
			this.user.userName = this.searchStu;
			request({
				method: 'post',
				url: '/api/user/select',
				data: { userName: this.user.userName }
			}).then(res => {
				if (res.code === 200) {
					this.userInfo = res.data;
				} else if (res.code === 400) {
					ElMessage.warning('res.message')
				}
			})
		}
	},
}
</script>

<style lang="less" scoped>
.overview-box {
    width: 100%;
    height: 100%;
}

.box-card {
    width: 100%;
    height: 48%;
    margin-top: 5px
}

.search-input:placeholder-shown {
	outline: none;
}

.search-input:focus {
	outline: none;
}
</style>
